<script setup>
import PassPie from './components/PassPie/index.vue'
import OptionsPicker from '@/components/OptionsPicker/index.vue';

const passList = [
    {
        name: '合格',
        value: 970,
        describe: '合格总数'
    },
    {
        name: '不合格',
        value: 30,
        describe: '不合格总数'
    }
]
</script>

<template>
    <div class="com-side-card card">
        <div class="com-card-head">
            <h1>产品质量</h1>
            <OptionsPicker />
        </div>
        <div class="com-block-content block">
            <div class="item" v-for="(item, index) in passList" :key="index">
                <div class="number">
                    <strong>{{ item.value }}</strong>个
                </div>
                <div class="describe">{{ item.describe }}</div>
            </div>
            <PassPie :list="passList" class="pie" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.card {
    height: 164px;

    .block {
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 10px;

        .item {
            width: 120px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url(./assets/img/bg1.png) no-repeat;
            background-size: 100% 100%;
            color: #c1c3c5;
            display: flex;
            flex-direction: column;

            strong {
                font-size: 24px;
                color: #28e2ff;
                margin-right: 3px;
            }
        }

        .pie {
            width: 90px;
        }
    }
}
</style>
